<template>
    <div class="Discuss">
        <!--        面包导航-->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>讨论区管理</el-breadcrumb-item>
            <el-breadcrumb-item>讨论区</el-breadcrumb-item>
        </el-breadcrumb>
        <!--        卡片-->
        <el-card class="box-card">
                <!-- <div class="show-something"> -->
                <div class="clearfix">
                    <span>{{tittle}}</span>
                </div>
                <div  class="text item content" ref="content">
                    <div v-for="(item,o) in list" :key="o" :class="{flexR:isRight}">
                        <p>
                            {{item.name}}({{item.creatime}})
                            <br>
                            <span class="font16">{{item.chatcontent}}</span>
                        </p>
                    </div>

                </div>
                <div>
                    <el-input
                            type="textarea"
                            :rows="3"
                            placeholder="请输入内容"
                            class="pushcontent"
                            v-model="chatcontent">
                    </el-input>
                </div>
                <el-button type="primary" size="small" class="btn1" @click="chatcontent = ''">取消</el-button>
                <el-button type="primary" size="small" class="btn" @click="push">发送</el-button>

        </el-card>
    </div>
</template>

<script>
    import moment from 'moment'
    export default {
        name: "Discuss",
        // data(){
        //     return{
        //         discussList: [],
        //         loading: false
        //     }
        // },
        // created() {
        //     this.getCharList()
        // },
        // methods:{
        //     async getCharList(){
        //       const {data: res} = await this.$http.get('Discuss/getAllDiscuss')
        //         this.discussList = res.data
        //         console.log(res)
        //     }
        // }
        data() {
            return {
                tittle: '讨论区',
                list: [
                ],
                chatcontent: '',
                isRight: false,//根据当前id和数据库取出来的信息的id比对，从而来控制是否将信息显示在右边
            }
        },
        created() {
            this.getCharList()
        },
        mounted: function () {
            this.setScrollPosition();
        },
        updated: function () {
            this.setScrollPosition();
        },
        methods: {

            //发表内容
            async push() {
                this.uid = window.sessionStorage.getItem('id')
                const {data: res} = await this.$http.get('Discuss/addDicuss',{
                    params:{
                        uid: this.uid,
                        chatcontent: this.chatcontent,
                    }
                })
                if(res.code !==0) return this.$message.error(res.message)
                this.$message.success(res.message)
                this.chatcontent = ''
                this.getCharList()
            },

            //滚动条定位在容器底部
            setScrollPosition() {
                this.$refs['content'].scrollTop = this.$refs['content'].scrollHeight;
            },
            async getCharList() {
                const {data: res} = await this.$http.get('Discuss/getAllDiscuss')
                this.list = res.data
                console.log(res)

            },
        }
    }
</script>

<style scoped>
    /*.Discuss{*/
    /*    height:auto;*/
    /*    width: 80%;*/
    /*    margin: 56px auto;*/
    /*    padding-bottom: 10px;*/
    /*    box-shadow: 0px 3px 7px;*/
    /*    border-radius: 6px;*/
    /*}*/
    .clearfix{
        border: 1px solid #DCDFE6;
        height: 50px;
        line-height: 50px;
        text-align: center;
    }
    .content{
        border: 1px solid #DCDFE6;
        padding: 0 15px;
        max-height: 500px;
        overflow: scroll;
        overflow-x:hidden;
    }
    .btn,.btn1{
        position: relative;
        top:5px;
    }
    .btn{
        left: 88%;
    }
    .btn1{
        left: 87%;
    }
    .font16{
        font-size: 18px;
    }
    .flexR{
        display: flex;
        justify-content: flex-end;
    }
</style>